<template>
  <el-card class="role-card">
    <div class="home-box">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getDeptTreeA">
        <template #left-btn>
          <el-row :gutter="10">
            <el-col :span="1.5" v-auth="'新增部门'">
              <addDept @getDeptTree="getDeptTreeA" />
            </el-col>
            <el-col :span="1.5">
              <updateDept
                @getDeptTree="getDeptTreeA"
                :selection="selection"
                v-auth="'修改部门'"
              />
            </el-col>
            <el-col :span="1.5">
              <deleteDept
                @getDeptTree="getDeptTreeA"
                :selection="selection"
                v-auth="'删除部门'"
              />
            </el-col>
          </el-row>
        </template>
      </right-toolbar>
      <el-table
        :data="tableData"
        v-loading="loading"
        row-key="id"
        element-loading-text="加载中..."
        @selection-change="selectChange"
        default-expand-all
        border
      >
        <el-table-column
          type="selection"
          :selectable="selectable"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="部门名称"
          width="200"
          header-align="center"
        ></el-table-column>
        <el-table-column prop="level" label="部门级别" align="center">
          <template #default="{ row }">
            <el-tag :type="levelType(row.level)">
              {{ levelTest(row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="部门描述"
          width="200"
          header-align="center"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            <el-tag :type="row.le == '4' ? 'danger' : 'success'">
              {{ row.state == "0" ? "停用" : "正常" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import eventBus from "@/utils/event-bus";
import addDept from "./components/addDept.vue";
import updateDept from "./components/updateDept.vue";
import deleteDept from "./components/deleteDept.vue";
import { getDeptTree } from "@/service/api/dept";

const showSearch = ref(true);
const tableData = ref([]);
const selection = ref([]);
const loading = ref(false);

onMounted(async () => {
  getDeptTreeA();
});

/**
 * 勾选表格CheckBox的回调函数-获取勾选的数组
 */
const selectChange = (select) => {
  selection.value = select;
};

/**
 * 获取部门列表
 */
const getDeptTreeA = async () => {
  // loading.value = true;
  tableData.value = await getDeptTree();
  
  // loading.value = false;
};

const selectable = (row) => {
  if (row.id === "1") return false;
  else return true;
};

const levelType = (level) => {
  if (level === 1) return "";
  else if (level === 2) return "success";
  else if (level === 3) return "warning";
  else return "danger";
};

const levelTest = (level) => {
  if (level === 1) return "一级";
  else if (level === 2) return "二级";
  else if (level === 3) return "三级";
  else return "四级";
};
</script>

<style lang="scss" scoped>
.home-box {
  .header {
    margin-bottom: 22px;
    text-align: right;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
.el-card {
  border-radius: 10px;
}
</style>
